<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
	 <meta charset="utf-8">
	 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	 <title th:replace="common/base::pagetitle"></title>
	 <link th:replace="common/base::static"/>
	 <link rel='stylesheet' th:href="@{/static/css/element.ui.2.13.2.index.css}">
</head>
<body style="background-color: #f2f2f2;">

<div id="kPage" class="layui-fluid" style="padding: 0">
	 
	 <div class="layui-row wlb-fluid-padding15">
		  
		  <div class="layui-col-md12">
				
				<div class="layui-card">
					 <!--					 <div class="layui-card-header">流程图</div>-->
					 <!--					 1 ——> 2 ——> 3 ——> 4-->
					 <div class="layui-card-body">
						  <div class="layui-form" lay-filter="">
								<fieldset style="border: 0px" disabled>
									 <div class="layui-form-item">
										  <label class="layui-form-label">生成时间</label>
										  <div class="layui-input-inline" style="width: 35%">
												<input type="text" id="generateTime" name="generateTime" th:value="${generateTime}" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
										  </div>
										  <label class="layui-form-label" style="width: 10%">供应商</label>
										  <div class="layui-input-inline" style="width: 35%">
												<input type="text" id="supplierName" name="supplierName" th:value="${supplierName}" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
										  </div>
									 </div>
									 <div class="layui-form-item">
										  <label class="layui-form-label">申请银行</label>
										  <div class="layui-input-inline" style="width: 35%">
												<input type="text" id="bankName" name="bankName" th:value="${bankName}" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
										  </div>
										  <label class="layui-form-label" style="width: 10%">到期日期</label>
										  <div class="layui-input-inline" style="width: 35%">
												<input type="text" id="endTime" name="endTime" th:value="${endTime}" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
										  </div>
									 </div>
									 <div class="layui-form-item">
										  <hr/>
									 </div>
								</fieldset>
								<!-- 渲染json schema模板 -->
								<div id="voucherList">
								</div>
								<table id="acceptanceInfoTable" lay-data="{id: 'acceptanceNumber'}" lay-filter="acceptanceInfoTable"></table>
								<div class="layui-form-item layui-hide">
									 <!--									 <input type="button" lay-submit="" lay-filter="kFormCheck" id="kFormCheck" value="验证凭证">-->
									 <input type="text" id="tradeId" name="tradeId" th:value="${tradeId}" placeholder="保存ID" autocomplete="off" class="layui-input">
									 <input type="text" id="templateId" name="templateId" th:value="${templateId}" placeholder="保存ID" autocomplete="off" class="layui-input">
								</div>
						  </div>
					 </div>
				</div>
		  
		  </div>
	 </div>
</div>

<script th:replace="common/base::context"></script>
<script th:replace="common/base::mainjs"></script>
<script type="text/javascript" th:inline="javascript">
	 var ttable;
    layui.use(['form', 'table'], function () {
        var $ = layui.$, form = layui.form, table = layui.table;
        ttable = table;
        //加载模板验收数据模板
        wlbKit.get(BASE_WEB + 'voucher/generate/getAcceptanceInfoSchema' + '?tradeId=' + $("#tradeId").val(), null, function (r) {
            if (r.code === req.status.ok) {
                var cols = new Array();
                cols.push({type: 'checkbox', fixed: 'left'})
                $.each(r.data, function (key, values) {
                    if ($.isArray(values)) {
                        //数组
                    } else {
                        if('acceptanceImgPath' == key) {
                            var c = {
                                field: key, title: values['title'], width: 140, templet(d) {
                                    return '<input type="button" onclick="viewImg(\'' + d.acceptanceImgPath + '\')" lay-filter="viewImg" id="viewImg" value="查看图片">'
                                }
                            };
                            cols.push(c);
                        }else if('id' == key){
                            //唯一标识
                            var c = {field: key, hide: true, title: values['title']};
                            cols.push(c);
								}else{
                            var c = {field: key, title: values['title'], width: 140};
                            cols.push(c);
								}
                    
                    }
                });
                table.render($.extend(config.layui.table, {
                    elem: '#acceptanceInfoTable'
                    , url: BASE_WEB + 'voucher/generate/getAcceptanceInfo?tradeId=' + $("#tradeId").val() + '&templateId=' + $("#templateId").val() //数据接口
                    , cols: [cols]
                    , done: function(res, curr, count){      //禁止选中
                        var allck = true;//全选标识，true可以全选，false不可全选
                        layui.each(res.data, function(i, item){
                           // tableView.find('tr[data-index=' + i + ']').css("background-color", "#CCCCCC").find('td').prop('disabled',true)
                            if(!item.selected){
                                allck = false;
                                $(".layui-table tr[data-index="+i+"] input[type='checkbox']").prop('disabled',true);
                                //禁止选中样式
                                $(".layui-table tr[data-index="+i+"] input[type='checkbox']").next().addClass('layui-btn-disabled');
                                //设置背景颜色
                                $(".layui-table tr[data-index="+i+"]").css("background-color", "#EEEED1").find('td').prop('disabled',true)
                            }
                        });
                        if (!allck) {
                            //设置全选按钮不可选择
                            $(".layui-table-header").find("input[name = 'layTableCheckbox'][lay-filter='layTableAllChoose']").each(function() {
                                $(this).attr("disabled", 'disabled').next().removeClass("layui-form-checked");
                                form.render('checkbox');
                            });
                        }
                    }
                }));
            }
        });

       
    })
    function viewImg(imgs) {
        parent.layer.open({
            type: 2 //Layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加 载层）4（tips层）,
            , title: '图片预览'   //标题
            , content: BASE_WEB + 'common/viewImg' + '?imgs=' + imgs
            , area: ['50%', '60%']   //宽高
            //shade: 0.4,   //遮罩透明度
            , btn: ['关闭'] //按钮组
            , yes: function (index) {//layer.msg('yes');    //点击确定回调
                parent.layer.close(index);
            }
        });
    }
    function getCheck(){
        //获取表格选中数据
        var checkStatus = ttable.checkStatus('acceptanceInfoTable');
        //交给父页面去校验
        // if (checkStatus.data.length <= 0) {
        //     wlbKit.errorMsg("请选择至少选择一条验收数据");
        //     return false;
        // }
        var ids = [];//验收单号
        $(checkStatus.data).each(function (i, o) {//o即为表格中一行的数据
            ids.push(o.id);
        });
        console.log("111" + ids);
        return ids;
    }
</script>

</body>
</html>